<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
import { getExpertDetailAPI } from '@/apis/expert'
import { pushQuestionAPI } from '@/apis/question'

const route = useRoute()
const router = useRouter()
let id = route.params.id

const expert = ref({})
const questionObj = ref({
    content: '',
    expert: '',
    expertId: id,
    phone: '',
    plant: '',
})

const userStore = useUserStore()
const pushQuestion = async () => {
    if (!userStore.token) {
        ElMessage({ type: 'error', message: '请先登录' })
    } else {
        console.log(check());
        if (!check()) {
            ElMessage({ type: 'error', message: '请填完表单数据' })
        } else {
            const res = await pushQuestionAPI({...questionObj.value})
            console.log(res)
            if (res.code === 2000) {
                ElMessage({ type: 'success', message: '提问成功' })
                router.replace({ path: '/guide' })
            }
        }
    }
}

const check = () => {
    let o = questionObj.value
    if (o.content !== '' && o.plant !== '' && o.phone !== '') {
        return true
    }
    return false
}

onMounted(async () => {
    const res = await getExpertDetailAPI(id)
    // console.log(res)
    if (res.code === 2000) {
        expert.value = res.data
        questionObj.value.expert = expert.value.realName
    }
})
</script>

<template>
<div class="ask-page">
    <div class="guide-card">
        <div class="card-l"><img src="@/assets/icon/expert.png" alt=""></div>
        <div class="card-r">
            <div class="card-r-top">
                <div class="user">{{ expert.realName }}·{{ expert.position }}</div>
                <div class="info">
                    <div>联系电话：{{ expert.phone }}</div>
                    <div>所属院系：{{ expert.belong }}</div>
                </div>
                <div class="skill">擅长：猪，牛，羊，鸡，鸭，鹅等畜牧的疾病防控技术</div>
            </div>
        </div>
    </div>
    <div class="ask-container">
        <div class="ask-item">
            <div class="label">农作物名称：</div>
            <div class="ipt-container"><input type="text" v-model="questionObj.plant"></div>
        </div>
        <div class="ask-item">
            <div class="label">提问内容：</div>
            <div class="ipt-container"><textarea name="ask" v-model="questionObj.content"></textarea></div>
        </div>
        <div class="ask-item">
            <div class="label">联系电话：</div>
            <div class="ipt-container"><input type="text" v-model="questionObj.phone"></div>
        </div>
    </div>
    <a href="#" id="ask-btn" @click="pushQuestion">提交提问</a>
</div>
</template>

<style scoped lang='scss'>
.ask-page {
    display: flex;
    flex-direction: column;
    width: 640px;
    margin: 20px auto;
    padding: 20px 20px;
    background-color: #fff;
}

#ask-btn {
    align-self: flex-end;
    display: block;
    height: 40px;
    width: 140px;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    background-color: #39bf3e;
    text-align: center;
    margin-top: 20px;
}

.ask-container {
    width: 600px;
    min-height: 300px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #d8d8d8;

    .ask-item {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0px;
        }

        .label {
            width: 100px;
        }

        .ipt-container {
            width: 450px;
            border: 1px solid #d8d8d8;

            input {
                width: 100%;
                font-size: 16px;
                padding: 10px;
            }

            textarea {
                width: 100%;
                min-height: 200px;
                outline: none;
                border: none;
                resize: none;
                font-size: 16px;
                padding: 10px;
                font-family:  "Arial"
            }
        }
    }
}

.guide-card {
    display: flex;
    width: 600px;
    height: 110px;
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #d8d8d8;;

    .card-l {
        width: 100px;
        height: 100%;

        img {
            width: 80px;
            height: 80px;
        }
    }

    .card-r {
        width: 450px;
        height: 100%;

        .card-r-top {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 100%;
            height: 110px;

            .info {
                font-size: 12px;
            }

            .skill {
                width: 100%;
                height: 38px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>
